<script lang="ts" setup>

</script>

<template>
  <div class="ExclusiveBroadcastSkeleton">
    <div class="topImgWrap">
      <el-skeleton animated>
        <template #template>
          <el-skeleton-item variant="image" style="width: 100%; height: 100%" />
        </template>
      </el-skeleton>
    </div>
    <div class="btmRows">
      <el-skeleton :rows="0" animated />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ExclusiveBroadcastSkeleton {
  display: flex;
  flex-direction: column;
  width: 31%;
  height: auto;
  margin: 0 12px 12px 0;

  .topImgWrap {
    width: 100%;
    height: 140px;
    margin-bottom: 6px;
  }

  .btmRows {
    width: 100%;
    height: 15px;
  }

}

:deep(.el-skeleton) {
  height: 100%;
}
:deep(.el-skeleton__p.is-first) {
  height: 100%;
}
:deep(.el-skeleton__item) {
  width: 100%;
}

/* // 歌单图片响应式设置 */
@media screen and (min-width: 1100px) {
  .topImgWrap {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .topImgWrap {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .topImgWrap {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .topImgWrap {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .topImgWrap {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .topImgWrap {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .topImgWrap {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .topImgWrap {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .topImgWrap {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .topImgWrap {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .topImgWrap {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .topImgWrap {
    height: 210px !important;
  }
}
</style>
